$.fn.btSelect = function() {  
  var selectForm = $(this);
  var selOptions = selectForm.children();
  var htmlOptions = '';
  var leftPos = 0;
  for(var i = 0; i < selOptions.length; i++ ){
    htmlOptions += '<div class="ui-btselect-opt-' +$ (selOptions[i]).val() + '" style="left:' + leftPos + 'px; display: inline-block; width: 160px; position: absolute;">' + $(selOptions[i]).html() + '</div>';      
    leftPos += 160;
  }
  var btnPrev = '<a class="ui-btselect-prev" title="Previous"><span class="ui-icon ui-icon-circle-triangle-w">Previous</span></a>';
  var btnNext = '<a class="ui-btselect-next" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>';
  var currentText = '<div class="ui-btselect-title ui-corner-all"><div class="ui-btselect-slider">' + htmlOptions + '</div></div>';
  var header = '<div class="ui-btselect-header ui-state-default ui-helper-clearfix">' + btnPrev + btnNext + currentText + '</div>';
  var element = $('<div class="ui-btselect">' + header + '</div>');
  element.find('.ui-btselect-prev, .ui-btselect-next').bind('mouseout', function() {
    $(this).removeClass('ui-state-hover');
    if (this.className.indexOf('ui-btselect-prev') != -1) {
      $(this).removeClass('ui-btselect-prev-hover');        
    } 
    if (this.className.indexOf('ui-btselect-next') != -1) {
      $(this).removeClass('ui-btselect-next-hover');
    }
  }).bind('mouseover', function() {
    $(this).addClass('ui-state-hover')
    if (this.className.indexOf('ui-btselect-prev') != -1) {
      $(this).addClass('ui-btselect-prev-hover');
    }
    if (this.className.indexOf('ui-btselect-next') != -1) {
      $(this).addClass('ui-btselect-next-hover');
    }
  }).bind('click', function(evt) {
    if (this.className.indexOf('ui-btselect-prev') != -1) {
      optClicked(true, $(evt.target).closest("div.form-item"));
    }
    if (this.className.indexOf('ui-btselect-next') != -1) {
      optClicked(false, $(evt.target).closest("div.form-item"));
    }    
  })
  selectForm.hide();
  selectForm.after(element);
  initButtons();
  
  function initButtons() {
    // Disables the prev button on the beggining
    // $('"element prev button" .ui-btselect-prev').css("display","none");
  }

  function optClicked(back,nxt) {   
    var val = selectForm.val();
    var options = $(nxt).find(".ui-btselect-slider").children();
    var optNext = $(nxt).find(".ui-btselect-next");
    var optPrev = $(nxt).find(".ui-btselect-prev");
    var firstOption = $('option:first', selectForm.parent()).val()
    var lastOption = $('option:last', selectForm.parent()).val()
    if (back) {
      val = $('option:selected', selectForm.parent()).prev().val();
      options.animate({"left": "+=160px"}, "100")
      if (val == firstOption) {
        optPrev.css("display","none");
      } else if (val != lastOption && optNext.css("display") == "none") {
        optNext.css("display","block");
      }
    } else {
      val = $('option:selected', selectForm.parent()).next().val();          
      $(options).animate({"left": "-=160px"}, "100")
      if (val == lastOption) {
        optNext.css("display","none");
      } else if (val != lastOption && optPrev.css("display") == "none") {
        optPrev.css("display","block");
      }
    }        
    selectForm.val(val);
    selectForm.trigger('change')
  }
}

$(document).ready(function(){
  $("#edit-sme-opt-years").btSelect();
  $("#edit-sme-opt-especialized").btSelect();
  $("#edit-sme-opt-industries").btSelect();
  $("#edit-sme-opt-position").btSelect();
  $("#edit-sme-opt-order").btSelect();
});